/*
 * name: scrollSelect.js
 * version: v1.0.2
 * update: 按钮变大
 * date: 2015-09-21
 * data model:
 {data:[
	{
		"id":"",
		"name":""
	},
	{
		"id":"",
		"name":""
	},
	...
 ]}
 */
define('scrollSelect', function(require, exports, module) {
	seajs.importStyle('.item-scroll-x { padding: 0;}\
		.item-scroll-x .item-scroll { overflow-x: auto;}\
		.item-scroll-x.item-icon-right .item-scroll { padding-right: 4em;}\
		.item-scroll-x.item-icon-right .item-icon, .scrollSelectLayer .item-icon{ right: 0; margin: 0; padding: 0 1em; background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);}\
		.item-scroll-x .item-scroll .btn { line-height: 0.8rem; height: 0.8rem;box-shadow:none;background:none;}\
		.item-scroll-x .item-scroll .cur { color: #3f8fff;}\
		.scrollSelectLayer { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; transition: all ease 0.7s; -webkit-transform: translate3d(0,-101%,0);transform: translate3d(0,-101%,0); background: inherit;}\
		.scrollSelectLayer.visible {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}\
		#scrollSelectLayerBtns { overflow: auto;}\
		#scrollSelectLayerBtns .btn { margin: 0 8px 10px;}', module.uri);
	//require('jquery');
	var scrollSelect = function(target, data, onInit, onChoose) {
		var winHeight = $(window).height(),
			layerHeight,
			getChannelBtns = function(layerbtn) {
				var _ = "";
				$.each(data.data,
					function(i, e) {
						if (layerbtn) {
							_ += ('<div class="btn btn-default" data-id="' + data.data[i].id + '">' + data.data[i].name + '</div>');
						} else {
							_ += ('<div class="btn" data-id="' + data.data[i].id + '">' + data.data[i].name + "</div>");
						}
					});
				return _;
			},
			layoutHtml = '<div class="item item-icon-right item-scroll-x"> <div class="item-scroll" id="scrollSelectBar">' + getChannelBtns() + '</div> <div class="ion item-icon" id="scrollSelectDown">&#xe6c2;</div> </div>\
	        <div class="scrollSelectLayer" id="scrollSelectLayer"><div class="item item-icon-right">\
				切换栏目<div class="ion item-icon" id="scrollSelectUp">&#xe6c5;</div>\
			</div>\
			<div class="item item-text-wrap" id="scrollSelectLayerBtns">\
			</div></div>',
			hasBringTop;

		$(target).html(layoutHtml);
		layerHeight = winHeight - $(target).outerHeight();

		$(target).on("click", "#scrollSelectDown", function() {
			//下拉
			var nowIndex = $("#scrollSelectBar").find(".cur").index();
			$('#scrollSelectLayerBtns').css({
				height: layerHeight
			}).html(getChannelBtns('layerbtn')).find('.btn').eq(nowIndex).addClass('btn-primary');
			$('#scrollSelectLayer').addClass('visible');
			//发布全局事件
			uexWindow.publishChannelNotification("scrollSelect", "scrollSelectDown");
			//置顶当前层
			uexWindow.bringToFront();
			hasBringTop = true;
		}).on('click', '#scrollSelectLayerBtns .btn', function(e) {
			//选择
			e.preventDefault();
			$(this).addClass('btn-primary').siblings().removeClass('btn-primary');
		}).on('click', '#scrollSelectUp', function() {
			//收起
			var newActive = $('#scrollSelectLayerBtns').find('.btn-primary').index();
			$("#scrollSelectBar").find('.btn').eq(newActive).addClass('cur').siblings().removeClass('cur');
			$('#scrollSelectLayer').removeClass('visible');
			//发布全局事件
			uexWindow.publishChannelNotification("scrollSelect", "scrollSelectUp");
			setTimeout(function() {
				typeof(onChoose) === 'function' && onChoose(newActive, hasBringTop);
			}, 700);
		}).on('click', '#scrollSelectBar .btn', function() {
			if ($(this).hasClass('cur')) {
				return null
			}
			hasBringTop = false;
			$(this).addClass('cur').siblings().removeClass('cur');
			typeof(onChoose) === 'function' && onChoose($(this).index(), hasBringTop);
		});
		typeof(onInit) === "function" && onInit();
		$(target).find('#scrollSelectBar .btn').eq(0).trigger('click');
	};
	module.exports = scrollSelect;
});